<script lang="ts" setup>
import { TransitionPresets, useTransition } from '@vueuse/core'
import { computed, nextTick, ref, watch } from 'vue'
const props = defineProps<{
  title: string
  value: number
}>()
const source = ref(0)
const outputValue = useTransition(source, {
  duration: 1000,
  transition: TransitionPresets.easeInOutCubic,
})
const formattedOutputValue = computed(() => outputValue.value.toFixed(0))
watch(
  () => props.value,
  async (newVal) => {
    if (Number.isNaN(newVal)) {
      console.warn('Invalid number provided, defaulting to 0.')
      newVal = 0
    }
    await nextTick()
    source.value = newVal
  },
  { immediate: true },
)
</script>

<template>
  <div class="data-item" flex flex-col items-center justify-center>
    <span class="text-[26px] leading-loose">{{ title }}</span>
    <span class="text-[36px] leading-loose font-black">{{ formattedOutputValue }}</span>
  </div>
</template>

<style scoped lang="scss">
.data-item {
  color: #fff;
  clip-path: polygon(0 0, 88% 0, 100% 40%, 100% 100%, 0 100%);
  background: linear-gradient(to right, #45aaff 0%, #000 5%, #000 63%),
    linear-gradient(135deg, rgba(0, 0, 0, 0.7) 52%, rgba(69, 170, 255, 1) 83%, #45aaff 100%);
  background-blend-mode: lighten;
}
</style>
